<template>
	<view class="image-bottom">
		<image :src="src" @error="imageError" :style="{width:width,height:height}" :mode="mode"></image>
	</view>
</template>

<script setup>
	import {
		watch,
		ref
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		constStore
	} from '@/store/const.js'
	const props = defineProps({
		imgSrc: {
			type: String
		},
		width: {
			type: String,
			default: "750rpx"
		},
		height: {
			type: String,
			default: ''
		},
		mode: {
			type: String,
			default: 'widthFix'
		}
	})
	const {
		constInfo
	} = storeToRefs(constStore())
	const src = ref()
	watch(() => props.imgSrc, (newValue, oldValue) => {
		src.value = constInfo.value.srcConst + newValue
	}, {
		deep: true,
		immediate: true
	})
	const imageError = (e) => {
		src.value = constInfo.value.srcConst + newValue
	}
</script>

<style scoped lang="scss">
	::v-deep {
		image {
			vertical-align: bottom; // 解决image背景图片下方有10rpx 的白边
		}
	}
</style>